<template>
  <div>
      <div class="panel">

        <div class="item" v-for="(item,index) in state.NoticeArr" :key="index">
            <div class="dfix">
              <div class="tits" @click="NoticeDetail(item)">{{item.title}}</div>
              <span>{{item.utime ? item.utime : item.ctime}}</span>
              <div class="el-icon-delete" @click="messDelete(item.id)" v-if="state.isRules == 1"></div>
            </div>
        </div>
        <div class="tex-cen" v-if="state.NoticeArr.length === 0">暂无最新公告</div>
      </div>
      <div class="text-cent" v-if="state.NoticeArr.length > 4" @click="NoticeList">查看更多</div>

       <el-dialog
      title="公告详情"
      v-model="state.dialogVisible"
      custom-class="dialog"
      :append-to-body="true"
      @close="state.isEdit = false"

    >
         <div class="userDig">
      <el-form :model="state.formObj"   label-width="100px" >

        <el-form-item label="标题:" prop="title">
            <span>{{state.formObj.title}}</span>
            </el-form-item>
            <el-form-item label="内容:" prop="notice_detail">
                <div v-html="state.formObj.notice_detail"></div>
            </el-form-item>
        <el-form-item label="附件:" prop="notice_detail" v-if="state.formObj.about_file.length > 0">
          <div class="left-item" v-for="(item,index) in state.formObj.about_file" :key="index">
            <div class="img">
              <img src="@/assets/img/pdf.png" alt="" v-if="item.imagetype == '.pdf'">
              <img src="@/assets/img/video.png" alt="" v-else-if="item.imagetype == '.mp4'">
              <img src="@/assets/img/image.png" alt="" v-else-if="item.imagetype == '.jpg' || item.imagetype == '.jpeg' || item.imagetype == '.png'">
              <img src="@/assets/img/zip.png" alt="" v-else-if="item.imagetype == '.zip' || item.imagetype == '.rar'">
              <img src="@/assets/img/word.png" alt="" v-else-if="item.imagetype == '.docx' || item.imagetype == '.pub' || item.imagetype == '.pptx'">
              <img src="@/assets/img/file.png" alt="" v-else>
            </div>
            <div class="ma-left">
              <div class="linh-heiht">{{item.title}}</div>
              <div class="download linh-heiht" @click="downloadFile(item.url)">下载</div>
            </div>
          </div>

        </el-form-item>
      </el-form>
         </div>
      <template #footer>
        <span class="dialog-footer" style="display:flex;justify-content:center;">
          <el-button type="primary" @click="dialogVisible">确 定</el-button>
        </span>
      </template>

    </el-dialog>


    <el-dialog
      title="全部公告"
      v-model="state.dialogVisibleList"
      custom-class="dialog"
      :append-to-body="true"

      @close="state.isEdit = false,state.isState = false"
    >
        <div class="item" v-for="(item,index) in state.wholeList" :key="index">
          <div class="dfix">
            <div class="tits" @click="NoticeDetail(item)">{{item.title}}</div>
            <span>{{item.utime ? item.utime : item.ctime}}</span>
            <div class="el-icon-delete" @click="messDelete(item.id,1)" v-if="state.isRules == 1"></div>
          </div>
        </div>

      <template #footer>
        <span class="dialog-footer" style="display:flex;justify-content:center;">
          <el-button type="primary" @click="state.dialogVisibleList = false,state.isState = false">确 定</el-button>
        </span>
      </template>
      <div class="foot" v-if="state.list_total > 10">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="state.list_total"
          :page-size="state.list_pagesize"
          :current-page="state.list_currentPage"
          @current-change="currentChange"
        >
        </el-pagination>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { getCurrentInstance, onMounted, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { isAuth } from '../../utils'

  const state = reactive({
    isHelp: false,
    isLogin : false,
    userInfo: {},
    NoticeArr: [],
    dialogVisible: false,
    dialogVisibleList: false,
    formObj:{
      about_file: []
    },
    list_total: 0,
    list_pagesize: 10,
    list_currentPage: 1,
    wholeList: [],
    isState: false,
    isAjax: true,
    fileList:[],
    disabled : true,
    listPage: 10,
    isRules: 0
  });
  export default {
    name: 'userMessage',
    components: {   },
    computed: {
      dataRule () {
        return {}
      }
    },
    setup(props,{emit}){
      const ctx = getCurrentInstance();
      const _this = ctx.appContext.config.globalProperties
      state.isRules = isAuth('Learn.Notice.DelNotice')
      const getNotice = () =>{
        if(state.isAjax === false){
          return
        }
        state.isAjax = false
        setTimeout(function () {
          state.isAjax = true
        },1000)
        _this.$request({
          url: "?s=Learn.Notice.GetNotice",
          params: {
            page: 1 ,
            pageSize: 5,
          },
        })
          .then(res=>{
            if(res.ret===200){
              let{total,data} = res.data
              state.NoticeArr = data
              if (res.data.about_file) {
                state.fileList =  res.data.about_file
              }else{
                state.fileList = []
              }

            }else{
              //_this.$message.error('获取数据失败。')
            }

          });
      };
      function getNoticeDetail (_id) {
        _this.$request({
          url: "?s=Learn.Notice.NoticeRow",
          params: {
            notice_id : _id
          },
        })
          .then(res=>{
            console.log(res);
            if(res.ret===200){
              state.formObj = res.data
              state.dialogVisibleList = false
              state.formObj.notice_detail = state.formObj.notice_detail.replace(/\r\n/g, '<br/>').replace(/\n/g, '<br/>').replace(/\s/g, '&nbsp;');
            }else{
              _this.$message.error('获取数据失败。')
            }

          });
      };
      const NoticeList = () => {
        state.dialogVisibleList = true
        state.isState = true
        _this.$request({
          url: "?s=Learn.Notice.GetNotice",
          params: {
            page: state.list_currentPage,
            pageSize: state.list_pagesize,
          },
        })
          .then(res=>{
            if(res.ret===200){
                state.wholeList = res.data.data
                state.list_total = res.data.total
            }
          });
      }
      function NoticeDetail(_item){
        getNoticeDetail(_item.id)
        state.dialogVisible = true
      };
      function onSuccess(){

      };
      function messDelete (id,type = 0) {
        ElMessageBox.confirm("确认后将无法恢复", "您确定要删除该公告吗?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {

            _this.$request({
              url: "?s=Learn.Notice.DelNotice",
              params: {
                notice_id : id,
                is_del: 1
              },
            }).then(res=>{
                if(type == 1){
                    NoticeList()
                }
                getNotice();
            });
          })
          .catch(() => {
          });
      }
      const downloadFile = (url) => {
         window.location.href = url
      }
      const dialogVisible = () => {
          state.dialogVisible = false
          if(state.isState){
            state.dialogVisibleList = true
          }
      }
      const currentChange = (val) => {
        if (val !== state.list_currentPage) {
          state.list_currentPage = val
          return NoticeList()
        }
      }
      onMounted(getNotice);
      return{
        state,
        getNotice,
        NoticeDetail,
        NoticeList,
        onSuccess,
        messDelete,
        downloadFile,
        dialogVisible,
        currentChange
      }
    },
  }
</script>

<style lang="scss" scoped>
  .userDig {
    height: 370px;
    overflow: auto;
    /deep/ .el-dialog__header {
      padding: 24px 30px;
      /deep/ .el-dialog__title {
        color: #343434;
        font-weight: 600;
      }
      /deep/ .el-dialog__headerbtn {
        top: 28px;
        right: 30px;
        /deep/ .el-dialog__close {
          color: #1a1a1c;
          font-weight: 600;
        }
      }
    }
    /deep/ .el-dialog__body {
      padding: 0px 30px 30px;
      .userAgree {
        height: 370px;
        background: #fff;
        padding: 22px 32px 28px;
        border-radius: 10px;
        overflow: auto;
      }
    }
  }
  .text-cent {
    text-align: center;
    font-size: 12px;
    cursor:pointer;
    color: #3a8ee6;
    font-weight: 600;
  }
  .text-cent:active {
    color: black;
  }
  .left-item {
    display: flex;
    padding-bottom: 15px;
    padding-top: 10px;
    border-bottom: 1px solid #efeeee;
  }
  .linh-heiht {
    line-height: 27px;
  }
  .tex-cen {
    text-align: center;
    color: #909090;
    font-size: 10px;
  }
  .panel {
    margin: 24px;
    .el-icon-delete:active {
      color: red;
    }

  }
  .item {
    .dfix {
      display: flex;
      margin-bottom: 20px;
    }
    .tits {
      color: #444444;
      font-size: 14px;
      margin-right: 10px;
      word-break: break-all;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    font-size: 14px;
    cursor: pointer;
    .img {
      width: 30px;
      height: 24px;
      border-radius: 50%;
      img{
        width: 100%;
        height: 100%;
      }
    }

    p {
      margin-left: 10px;
      flex: 1;
      width: 150px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow:ellipsis;
      color: #444444FF;
    }

    span {
      color: #888888FF;
      margin-right: 20px;
    }
    .delete {
      color: #ff1616;
    }
  }
  .ma-left {
    margin-left: 15px;
  }
  .download {
    border: 1px solid;
    padding: 5px;
    border-radius: 5px;
    background: #409eff;
    color: white !important;
    margin-right: 1px !important;
    cursor:pointer;
    height: 9px;
    display: inline-block;
    line-height: 9px;

  }
  .download:active {
    color: red !important;
  }
  .wj {
    padding:20px;
    font-size: 12px;
  }
  .img {

  }
  .d-time {
    color: #888888FF;
    padding-top: 5px;
  }
</style>
